<template>

  <div class="login-container">
    <div class="bg"></div>
    <div class="form-container">
      <div>
        <h1 style="text-align: center;">教育培训平台</h1>
        <h1 style="text-align: center;">交通运输人员就业与再就业</h1>
      </div>
      <el-input prefix-icon="el-icon-user" style=" margin-bottom: 10px;;margin-left:30px;width: 85%;"
        v-model="loginForm.idNumber" placeholder="请输入账号"></el-input>
      <el-input prefix-icon="el-icon-lock" style=" margin-bottom: 10px;;margin-left:30px;width: 85%;"
        placeholder="请输入密码" v-model="loginForm.password" show-password></el-input>
      <el-button type="primary" style="width:100%;margin-bottom:20px;;margin-left:30px;width: 85%;"
        @click.native.prevent="login">登录</el-button>

      <!-- <a href="#" @click.prevent="register">注册</a> -->
      <el-link type="info" :underline="false" @click.prevent="register">
        没有账号?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注册账号&nbsp;→
      </el-link>

    </div>



    <el-dialog title="账号注册" :visible.sync="dialogFormVisible" width="27%">
      <el-form :model="user" label-width="80px" autocomplete="off">
        <el-form-item label="姓名" :rules="[{ required: true }]">
          <el-input v-model="user.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别" :rules="[{ required: true }]">
          <el-select v-model="user.sex" placeholder="请选择性别" style="width: 100%">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" :rules="[
          { required: true, pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'blur' }
        ]">
          <el-input v-model="user.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="证件号" prop="idNumber" :rules="[
          { pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/, message: '证件号格式错误', trigger: 'blur', required: true }
        ]">
          <el-input v-model="user.idNumber" placeholder="请输入证件号"></el-input>
        </el-form-item>
        <el-form-item label="密码" :rules="[{ required: true }]">
          <el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="所属机构" :rules="[{ required: true }]">
          <el-select v-model="user.agencyId" placeholder="请选择" style="width:100%">
            <el-option v-for="item in agencyList" :key="item.value" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false; clearInfo()">取消</el-button>
        <el-button type="primary" @click="add()">确定</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
import * as THREE from "three";
import BIRDS from "vanta/src/vanta.birds";
import { login, register } from "@/api/user";
import { setToken } from "@/utils/auth";
import { getAgencyList } from "@/api/agency";


export default {
  data() {
    //数据模型
    return {
      loginForm: {
        idNumber: '',
        password: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '80px',
      user: {},
      agencyList: [],
    }
  },
  methods: {
    login() {
      login(this.loginForm).then((res) => {
        console.log(res)
        if (res.data.code === 1) {
          setToken(res.data.data);
          this.$message.success("登录成功");
          window.location.href = "/infoManage";
          
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch((e) => {
      })
    },

    register() {
      this.clearInfo()
      //注册
      this.dialogFormVisible = true;

    },

    clearInfo() {
      this.user = {}
    },
    add() {
      console.log(this.user)
      register(this.user).then((res) => {
        console.log(res)
        if (res.data.code === 1) {
          this.$message.success("注册成功")
          this.dialogFormVisible = false;
          this.clearInfo();
          this.loginForm = res.data.data
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch((e) => {
      })
    },
    getAllAgencyList() {
      getAgencyList().then((res) => {
        if (res.data.code === 1) {
          this.agencyList = res.data.data;
        }
      }).catch((e) => {
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    handleClose2(done) {
      this.$confirm('是否记录下账号？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    validateAge(rule, value, callback) {
      if (value === undefined || value === null || value === '') {
        return callback(new Error('请输入年龄'));
      }
      if (value < 0 || value > 100) {
        callback(new Error('年龄必须在0到100之间'));
      } else {
        callback();
      }
    },

    getAgencyLists() {
      getAgencyList().then((res) => {
        if (res.data.code === 1) {
          this.agencyList = res.data.data;
        }
      }).catch((e) => { })
    }


  },

  mounted() {
    this.getAllAgencyList();
    this.getAgencyLists();
    // this.vantaEffect = BIRDS({
    //   el: this.$refs.vantaRef,
    //   THREE: THREE,
    // });
    // // 修改颜色时 cells 需要全大写字母 可生效
    // VANTA.BIRDS({
    //   el: this.$refs.vantaRef,
    //   mouseControls: true,
    //   touchControls: true,
    //   gyroControls: false,
    //   minHeight: 200.00,
    //   minWidth: 200.00,
    //   scale: 1.00,
    //   scaleMobile: 1.00,
    //   backgroundColor: 0x154ea0,
    //   color1: 0xc52929
    // });

  },

  // beforeDestroy() {
  //   if (this.vantaEffect) {
  //     this.vantaEffect.destroy();
  //   }
  // },
};
</script>


<style lang="scss" scoped>
.login-container {
  display: flex;
  height: 98vh;
  background-color: #fff;

  .bg {
    background: url('@/assets/login_bg.jpg') no-repeat center / cover;
    flex: 17;
    border-radius: 20px 20px 20px 20px;
    height: 100%;
    /* 背景图片高度 */
  }

  .form-container {
    padding-top: 200px;
    padding-left: 40px;
    padding-right: 40px;
    /* 根据您的需要调整数值 */
    flex: 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
  }
}

h1 {
  font-size: 30px;
  color: #000;
  padding: 10px;
  margin-top: -120px
}

p {
  margin-top: 0px;
  font-size: 14px;
  color: #000;
}

a {
  color: #000;
  /* 白色文字 */
  text-decoration: none;
  /* 去掉下划线 */
  opacity: 1;
  /* 不透明 */
}
</style>
